import React, { Fragment, useState, useEffect } from 'react';
import type { FC } from 'react';
import { Calendar, Badge, Drawer, Form, Button, Input, message } from 'antd';
import style from './calender.less';
import moment from 'moment';
import { getWordCloud} from './service';


/** 用到
 *  1. 日历 -  盖样式 Badge作为待办 去掉了日历中下月的内容  将日历做成圆角阴影 
 *      validRange 设置可以显示的日期 [moment, moment]  只是其他日期不可选择 包括下拉选中的非此范围的日期不可选择
 *  2. 抽屉  点击日期将visible变为true
 *  3. 透明背景色  background: transparent;
 *  4. 找到第6行tr    tr:nth-child(6) 
 */


const Calender: FC<Record<string, any>> = () => {
  function getListData(value) {
    let listData;
    switch (value.date()) {
      case 8:
        listData = [
          { type: 'warning', content: 'This is warning event.' },
          { type: 'success', content: 'This is usual event.' },
        ];
        break;
      case 10:
        listData = [
          { type: 'warning', content: 'This is warning event.' },
          { type: 'success', content: 'This is usual event.' },
          { type: 'error', content: 'This is error event.' },
        ];
        break;
      case 15:
        listData = [
          { type: 'warning', content: 'This is warning event' },
          { type: 'success', content: 'This is very long usual event。。....' },
          { type: 'error', content: 'This is error event 1.' },
          { type: 'error', content: 'This is error event 2.' },
          { type: 'error', content: 'This is error event 3.' },
          { type: 'error', content: 'This is error event 4.' },
        ];
        break;
      default:
    }
    return listData || [];
  }
  function dateCellRender(value) {
    // dateCellRender是遍历渲染出来的
    const listData = getListData(value);
    return listData.length > 0 && <Badge status={'error'} />;
  }
  function getMonthData(value) {
    if (value.month() === 8) {
      return 1394;
    }
  }

  function monthCellRender(value) {
    const num = getMonthData(value);
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
        <span>Backlog number</span>
      </div>
    ) : null;
  }
  const OnSelect = value => {
    // showDrawer()
     
  };
  const [visible, setVisible] = useState(false);
    // 抽屉是否展开
  // const showDrawer = () => {
  //   // setVisible(true);

  // };
  // const onClose = () => {
  //   setVisible(false);
  // };
  const startDate = moment().startOf('month');
  const endDate = moment().endOf('month');

  const [data, setData] = useState([]);

  // validRange 只是置灰
  return ( 
    <div className={style.cal}>
      <Calendar
        dateCellRender={dateCellRender}
        monthCellRender={monthCellRender}
        onSelect={OnSelect}
      />
    </div>
  );
};
export default Calender;
